どこでもRUN-JS Bookmarklet
https://gyazo.com/325b0ff3db19ba18101f068abe7e2e67
Scrapboxの任意のページに JavaScript を書く。
普通の script.js と区別するため code:RUN-script.js とする。
そのページを表示していれば実行できるBookmarkletを作った。
プロジェクトメンバーが誰でもスクリプトを実行できるようになって・・・・マズイかも知れない。
Myページオーナーだけがスクリプトの実行権を持つのが妥当な気もする。
なわけで、
実行するスクリプトは２つ。
分割して書いても順に実行される。
code:RUN-script.js
alert('TEST-1 : I am running here now！');
code:RUN-script.js
async function AsyncOperation() {
var context = new AudioContext();
var oscillator = context.createOscillator();
oscillator.type = "sine";
oscillator.frequency.value = 800;
oscillator.connect(context.destination);
oscillator.start(); /* ピって鳴く！ */
// setTimeoutをPromiseでラップして非同期処理を行います。
await new Promise(resolve => setTimeout(resolve, 100));
oscillator.stop();
// 非同期処理が完了したらページをリロードします。
location.reload();
}
alert('TEST-2 : Next Running!! ＆ BEEP!!');
AsyncOperation();
どこでもRUNする Bookmarklet は Bing AI に書いてもらった。
code:boolmarklet.js
javascript:(function() {
var currentUrl = decodeURIComponent(window.location.href);
fetch(scriptUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
var existingScript = document.querySelector(script[src="${scriptUrl}"]);
if (!existingScript) {
var elm = document.createElement('script');
elm.setAttribute('src', scriptUrl);
elm.onload = function() {
this.remove();
};
document.body.appendChild(elm);
}
})
.catch(error => {
alert(RUN-script.js にアクセスできません。);
});
})();
AIに内容の解説もお願いしてみた。
このJavaScriptコードは、ブラウザが表示しているScrapboxページの特定のスクリプト（RUN-script.js）を実行するためのものです。
以下に各部分の詳細を説明します。
現在のURLの取得：
window.location.hrefを使用して、現在のブラウザのURLを取得します。
その後、decodeURIComponent関数を使用してURLをデコードします。
スクリプトURLの生成：
現在のURLからScrapboxのページ名を取得し、それを基にRUN-script.jsのURLを生成します。
スクリプトURLのチェック：
fetch関数を使用してスクリプトのURLにアクセスし、そのレスポンスが正常であるかを確認します。
もしレスポンスが正常でなければ、エラーをスローします。
スクリプトの実行：
スクリプトのURLが正常であれば、そのスクリプトをページに追加して実行します。
すでに同じスクリプトがページに存在する場合は、新たに追加することはありません。
スクリプトの削除：
スクリプトが実行された後、そのスクリプト要素はページから削除されます。
これは、onloadイベントハンドラ内でthis.remove()を呼び出すことで実現されています。
エラーハンドリング：
スクリプトのURLにアクセスできない場合は、catchブロックが実行されエラーメッセージが表示されます。
このコードは、Scrapboxの特定のページに対して特定のJavaScriptを動的に実行します。
ウェブページの動的なカスタマイズや、特定の操作を自動化するのに有効です。
ただし、このコードはScrapboxの特定の環境でのみ動作し、他のウェブサイトや環境では動作しない可能性があります。
このコードを使用する際には、自分が何をしているかを理解し、信頼できるスクリプトのみを実行するように注意する必要があります。不適切なスクリプトを実行すると、セキュリティ上の問題を引き起こす可能性があります。この点には十分注意してください。
だそーな。
このサイトを利用して、一行にまとめて、Bookmarklet化する。
先頭と最後の行を除いた部分を変換処理にかけると、次の出力が得られる。
$ javascript:(function()%7Bvar%20currentUrl%20%3D%20decodeURIComponent(window.location.href)%3Bvar%20scriptUrl%20%3D%20currentUrl.split('https%3A%2F%2Fscrapbox.io%2F')%5B1%5D%3BscriptUrl%20%3D%20'https%3A%2F%2Fscrapbox.io%2Fapi%2Fcode%2F'%20%2B%20scriptUrl%20%2B%20'%2FRUN-script.js'%3Bfetch(scriptUrl).then(response%20%3D%3E%20%7Bif%20(!response.ok)%20%7Bthrow%20new%20Error('Network%20response%20was%20not%20ok')%3B%7Dvar%20existingScript%20%3D%20document.querySelector(%60script%5Bsrc%3D%22%24%7BscriptUrl%7D%22%5D%60)%3Bif%20(!existingScript)%20%7Bvar%20elm%20%3D%20document.createElement('script')%3Belm.setAttribute('src'%2C%20scriptUrl)%3Belm.onload%20%3D%20function()%20%7Bthis.remove()%3B%7D%3Bdocument.body.appendChild(elm)%3B%7D%7D).catch(error%20%3D%3E%20%7Balert(%60RUN-script.js%20%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82%60)%3B%7D)%7D)()
これをブックマークに登録して「RUN」（任意）みたいな名前を付けておく。
実行したJavaScriptは、ページをリロードすることで、効果をなくすことができる。
ScrapboxでJavaScriptのテスト環境が作れる。
カスタマイズコレクションのUserScript をcode:RUN-script.js コピペしてお手軽にお試しすることもできる。
Bookmarkletからのスクリプト実行は、重複して起動させると干渉を起こす危険性がある。
適切にページをリロードする必要がある（要検討）。
補足
code:RUN-script.js という名前がついていれば、自分が書いたものではないスクリプトでも実行できてしまう。
公開プロジェクトなどに書かれているスクリプトは危険。
Bookmarkletの3行目と4行目を
var scriptUrl = currentUrl.split('https://scrapbox.io/自分の特定のプロジェクト名/')[1];
scriptUrl = 'https://scrapbox.io/api/code/自分の特定のプロジェクト名/' + scriptUrl + '/RUN-script.js';
のように変更すると、RUN-script.jsを取り込めるプロジェクトが限定される。
さらに、Personal Setting の UserScript を Enabled にしてなくても動いてしまう。
Bookmarkletは危険だという認識が必要かも知れない。